figure.Alarm = new Class({
    Extends:figure.DomFigure,

    initialize: function(id, css, size) {
        this.parent(id);
        this.createElement('canvas', {
            id: this.id,
            Width: 100,
            Height: 100,
            css: css
        });
        this.radius = size || 9;
        this.element = this.getElement();
        this.element.on('encenderGral', {id: this.id}, this.animate)
    },
    draw: function() {
        var ctx = this.element[0].getContext("2d");
        var grd = ctx.createLinearGradient(100,70,0,0);
        grd.addColorStop(0, "gray");
        grd.addColorStop(1,"white");

        this.element.drawArc({
            strokeStyle: "#000",
            layer: true,
            x: this.radius*2, y: this.radius*2,
            name: 'big',
            radius: this.radius,
            fillStyle: "gray"
        });

        this.element.drawArc({
            strokeStyle: "#000",
            layer: true,
            x: this.radius*2, y: this.radius*2,
            name: 'small',
            radius: this.radius /8,
            fillStyle: "white"
        });

    },

    animate: function (event) {
        var values = ['red', 'gray', 'red', 'gray', 'red', 'gray', 'red', 'gray'];
        var elem = $("#" + event.data.id);
        for (var key in values) {
            if (values.hasOwnProperty(key)){
                elem.animateLayer("big", {fillStyle: values[key]}, 100)
            }
        }
    }
});